<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户管理1</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="site in sites">
                    <td>{{ site.name }}</td>
                    <td>{{ site.sex }}</td>
                    <td>{{ site.age }}</td>
                </tr>
            </tbody>
        </table>

    </div>
    <script>
        const app = {
            data() {
                return {
                    sites: [
                        { name: '黄晓明', sex: '男', age: 18 },
                        { name: '李嘉诚', sex: '男', age: 78 },
                        { name: '董明珠', sex: '女', age: 68 },
                        { name: '孙悟空', sex: '男', age: 108 },
                        
                    ]
                }
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
    <style>
        table {
            width: 40%;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
        }

        table th {
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
        }

        table td,
        table th {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
    </style>
</body>

</html>